<template>
    <el-dialog
            :title="title"
            :visible.sync="visible"
            :close-on-click-modal="false"
            width="80%"
            top="4%"

            v-dialogDrag
            id="dataPreviewDialog">
        <data-preview-table :tableInData="tableData"></data-preview-table>
    </el-dialog>
</template>

<script>
    import dataPreviewTable from './dataPreviewTable.vue'
    import axios from 'axios';

    export default {
        name: "dataDialog",
        data() {
            return {
                title: "No Title",
                visible: false,
                queryUrl: "",
                queryParams: null,
                tableData: null
            }
        },
        components: {
            "dataPreviewTable": dataPreviewTable
        },
        methods: {
            // changeTableDataFormat(data) {
            //     let result = [];
            //     let fields = [];
            //     for (let i = 0; i < data[0].length; i++) {
            //         fields.push(data[0][i]);
            //     }
            //     for (let i = 1; i < data.length; i++) {
            //         let eachLine = {};
            //         for (let j = 0; j < fields.length; j++) {
            //             eachLine[fields[j]] = data[i][j];
            //         }
            //         result.push(eachLine);
            //     }
            //     return result;
            // }
        },
        watch: {
            visible() {
                let that = this;
                axios.get(that.$URL.dataPreviewUrl+that.queryUrl
                ).then(function (res) {
                    //处理res.body为对象的问题
                    if (res.data.code == 200) {

                        that.tableData = res.data.body.data;

                        // console.log("fdgfdfg");
                    } else {
                        // that.tableData = res.body;
                    }
                    // that.tableData = res.body;
                }).catch(function (error) {
                    that.$message({
                        type: 'warning',
                        message: error
                    })
                });
            }
        },
        created() {
            let that = this;
            that.$Bus.$on("dataPreviewDialogParams", (params) => {
                that.visible = params.visible;
                that.title = params.title;
                that.queryUrl = params.queryUrl;
                that.queryParams = params.queryParams;
            });
        }
    }
</script>

<style>
    #dataPreviewDialog .el-dialog__header {
        margin-left: 5px;
    }

    #dataPreviewDialog .el-dialog__body {
        padding: 0px 20px 20px 20px;

    }

    #dataPreviewDialog .el-dialog__wrapper {
        margin-left: 0;
        width: 100%;
    }
</style>
